<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:43
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage back>
    <template #title-suffix>
      <NTag class="ml-12" type="warning">
        {{ route.query.orderNum }}
      </NTag>
    </template>
    <n-space vertical>
      <n-tabs type="line" size="medium" default-value="orderDetails" @update:value="handleUpdateValue">
        <n-tab-pane name="orderDetails" tab="销售单详情">
          <n-space class="sale-header">
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                订单号
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.orderNum" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                顾客姓名
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.userName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                支付状态
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.payStatusName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                订单总价
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.originalMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                折扣金额
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.discountMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                抹零
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.mlMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                应收金额
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.receivableMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                已收金额
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.receivedMoney" disabled />
              </div>
            </div>

            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                已退金额
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.refundedMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                创建时间
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.createTime" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                订单日期
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.orderDate" disabled />
              </div>
            </div>
          </n-space>
          <n-space class="sale-header">
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                配送方式
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.deliveryOrder?.deliveryTypeName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                配送费
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input-number :value="order.deliveryMoney" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                收件人
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input :value="order.deliveryOrder?.userName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                电话
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="order.deliveryOrder?.userPhone" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                地址
              </label>
              <div style=" width: 491px" class="flex-shrink-0">
                <n-input type="text" :value="order.deliveryOrder?.deliveryAddress" disabled />
              </div>
            </div>
          </n-space>
          <n-data-table :columns="orderItemColumns" :data="orderItemData" :single-line="false" :bordered="true" />
        </n-tab-pane>
        <n-tab-pane name="pay" tab="支付记录">
          <n-data-table :columns="payRecordColumns" :data="payRecord" :single-line="false" :bordered="true" />
        </n-tab-pane>
        <!-- 跑腿单信息 -->
        <n-tab-pane v-if="errandOrder.id" name="errandOrder" tab="跑腿单详情">
          <n-card class="w-100%" title="达达跑腿" segmented>
            <template #header-extra>
              <div class="flex items-center">
                <NButton class="ml-12" type="primary">
                  <i class="i-line-md:confirm-circle mr-4 text-18" />
                  骑手位置
                </NButton>
                <NButton class="ml-12" type="primary">
                  <i class="i-line-md:confirm-circle mr-4 text-18" />
                  查询状态
                </NButton>
              </div>
            </template>
            <n-descriptions class="w-100% pl-100 pr-100" label-placement="left" :column="3">
              <n-descriptions-item label="状态">
                {{ errandOrder.errandOrderStatusName }}
              </n-descriptions-item>
              <n-descriptions-item label="跑腿费">
                {{ errandOrder.deliveryFee }}
              </n-descriptions-item>
              <n-descriptions-item label="距离">
                {{ errandOrder.errandDistance }}米
              </n-descriptions-item>
              <n-descriptions-item label="骑手姓名">
                {{ errandOrder.transporterName }}
              </n-descriptions-item>
              <n-descriptions-item label="骑手电话">
                {{ errandOrder.transporterPhone }}
              </n-descriptions-item>
            </n-descriptions>
            <n-divider class="mb-0! mt-12!">
              <p class="text-14 opacity-60">
                跑腿单日志
              </p>
            </n-divider>
            <n-data-table :columns="orderLogColumns" :data="errandDadaCallbacks" bordered="true" />
          </n-card>
        </n-tab-pane>
      </n-tabs>
    </n-space>
  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton } from 'naive-ui'
import api from './api'

defineOptions({ name: 'SaleOrderDetails' })
const route = useRoute()
const orderId = route.query.orderId // 路由携带的参数
const order = ref({}) // 订单详情
const orderItemData = ref([]) // 订单项详情
const payRecord = ref([])// 支付记录
const errandOrder = ref({})// 跑腿单
const errandDadaCallbacks = ref([])// 订单日志
// 生命周期
onMounted(async () => {
  // let orderId = route.query.orderId;
  order.value = await api.getOrderPO(orderId)
  orderItemData.value = order.value.items
  // handleUpdateValue('orderDetails')
  // 跑腿单信息
  const res = await api.getErrandPO({ orderId })
  if (res.length > 0) {
    errandOrder.value = res[0]
    errandDadaCallbacks.value = res[0].errandDadaCallbacks
  }
})
// 订单项详情 表头
const orderItemColumns = [
  {
    title: '商品名',
    key: 'goodsName',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '图片',
    key: 'no',
    align: 'center',
    titleAlign: 'center',
    render: (rew) => {
      const goodsPics = rew.goods.goodsPics
      if (goodsPics) {
        return h(NAvatar, {
          size: 'medium',
          src: goodsPics,
        })
      }
      return '暂无标签'
    },
  },
  {
    title: '数量',
    key: 'goodsNum',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '应收',
    key: 'receivableMoney',
    align: 'center',
    titleAlign: 'center',
  },
]
// 支付记录 表头
const payRecordColumns = [
  {
    title: '合计金额',
    key: 'payAmount',
    align: 'center',
    titleAlign: 'center',
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '支付方式',
    key: 'payMethodTypeName',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '支付金额',
    key: 'payAmount2',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '支付状态',
    key: 'payOrderStatusName',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '支付时间',
    key: 'createTime',
    align: 'center',
    titleAlign: 'center',
  },
]
// 跑腿单单项详情 表头
const orderLogColumns = [
  {
    title: '时间',
    key: 'createTime',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '类型',
    key: 'orderBizType',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '行为',
    key: 'actionName',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '行为结果',
    key: 'actionResult',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '备注',
    key: 'remark',
    align: 'center',
    titleAlign: 'center',
  },
]
async function handleUpdateValue(value) {
  // 销售单
  if (value === 'orderDetails') {
    // todo
  }
  else if (value === 'pay') {
    // 支付记录
    if (payRecord.value.length === 0) {
      payRecord.value = await api.getPayRecord(orderId)
      // 转换后的数据
      const transformedData = []

      // 遍历原始数据的每个对象
      payRecord.value.forEach((item) => {
        item.payOrderRecords.forEach((payOrder) => {
          const newData = {
            payOrderStatusName: item.payOrderStatusName,
            payAmount: item.payAmount,
            payAmount2: payOrder.payAmount,
            payMethodTypeName: payOrder.payMethodTypeName,
            createTime: payOrder.createTime,
          }
          // 控制合并逻辑
          if (!item.rowSpan) {
            item.rowSpan = true
            newData.rowSpan = true // 设置合并
            newData.rowNum = item.payOrderRecords.length // 合并的行数
          }
          transformedData.push(newData)
        })
      })
      payRecord.value = transformedData
    }
  }
  else if (value === 'errandOrder') {
    // 跑腿单信息
    const param = { orderId }
    const res = await api.getErrandPO(param)
    errandOrder.value = res[0]
    errandDadaCallbacks.value = res[0].errandDadaCallbacks
  }
  else {
    // todo
  }
  // 支付记录
  // 会话记录
}
</script>

<style>
.sale-header {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(255 255 255 / var(--un-bg-opacity));
  border: 1px solid rgb(205 216 217);
  border-radius: 3px;
  /* 圆角半径 */
}
</style>
